<template>
	<view class="share-sheet">
		<view class="sharebgDels" @click="toBack">
			<image class="sharebgDel" src="https://daiyue.gzzhenyi.net/static/index/del.png" mode="widthFix" />
		</view>
		<!-- <view class="canvas">
            <image class="sharebg" src="https://daiyue.gzzhenyi.net/static/index/share.png" mode="widthFix" />
            <view class="sharebg-logo">
                <image src="https://daiyue.gzzhenyi.net/static/index/logos.png" mode="aspectFill" />
            </view>
            <view class="share-cone">
                <view class="share-cone-title">扫描保存二维码 联系厂家</view>
                <view class="share-cone-text">立即获取产品最新底价</view>
            </view>
            <view class="sharebg-line">
                <view class="sharebg-line-title">医疗器械有限公司</view>
                <image src="https://daiyue.gzzhenyi.net/static/image/user/WeChate.jpg" mode="scaleToFill" />
                <view class="sharebg-line-text">粤A5865</view>
            </view>
        </view> -->
		<image class="sharebg" :src="path" mode="widthFix"></image>
		<l-painter ref="painter" :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
		<image class="shareImg" src="https://daiyue.gzzhenyi.net/static/index/shareImg.png" mode="widthFix" />
		<view class="shareGuan">
			<image class="shareGuanImg" src="https://daiyue.gzzhenyi.net/static/index/wx.png" mode="heightFix"
				@tap="base64ToUrl(path, 0)" />
			<image class="shareGuanImg" src="https://daiyue.gzzhenyi.net/static/index/wxxx.png" mode="heightFix"
				@tap="base64ToUrl(path, 0)" />
			<image class="shareGuanImg" src="https://daiyue.gzzhenyi.net/static/index/simg.png" mode="heightFix"
				@tap="base64ToUrl(path, 1)" />
		</view>

	</view>
</template>

<script>
import {
	base64ToUrl
} from "@/util/util.js"
import baseUrl from "@/api/baseUrl";
export default {
	props: {
		shopList: {
			type: Object,
			default: {}
		}
	},
	watch: {
		shopList: {
			handler(newVal, oldVal) {
				if (newVal.store_name) {
					this.poster.views[1].views[0].src = this.baseUrl + newVal.avatar
					this.painter.views[3].views[0].text = newVal.state_text
				}
			},
			deep: true  
		}
	},
	
	mounted() {
		console.log(this.shopList)
	},
	data() {
		return {
			path: '',
			baseUrl,
			poster: {
				css: {
					width: "549rpx",
					paddingBottom: "40rpx",
					borderRadius: '20rpx',
					height: '663.5rpx',
				},
				views: [
					{
						src: 'https://daiyue.gzzhenyi.net/static/index/showBg.png',
						type: "image",
						css: {
							width: '549rpx',
							height: '663.5rpx',
							objectFit: 'cover'
						}
					},
					{
						type: "view",
						css: {
							position: 'absolute',
							left: '10%',
							transform: 'translate(32.5%, 10%)'
						},
						views: [{
							type: "image",
							// 头像
							src: `https://daiyue.gzzhenyi.net${this.shopList.avatar}`,
							css: {
								width: '82rpx',
								height: '82rpx',
							}
						}

						]
					},
					{
						type: "view",
						css: {
							position: 'absolute',
							left: '10%',
							top: "38%",
							transform: 'translate(21.9%, 52.3%)'
						},
						views: [{
							type: "image",
							// 微信码
							src: `https://daiyue.gzzhenyi.net${this.shopList.qrcode_img}`,
							css: {
								width: '200rpx',
								height: '200rpx',
							}
						}

						]
					},
					{
						type: "view",
						css: {
							position: 'absolute',
							left: '10%',
							top: "86%",
							transform: 'translate(12%, 3%)'
						},
						views: [{
							type: "text",
							text: this.shopList.state_text,
							css: {
								fontSize: '24rpx',
								color: '#3D3D3D',
								width: '300rpx',
								textAlign: 'center'
							}
						}

						]
					}
				]
			}

		};
	},
	methods: {
		base64ToUrl,
		toBack() {
			this.$emit('toBack')
		}
	}
};
</script>

<style scoped lang="scss">
.share-sheet {
	position: relative;

	.sharebg {
		width: 512upx;
		// margin-left: 20upx;
	}

	.shareImg {
		width: 244upx;
		margin: 33upx auto;
		display: flex;
	}

	.shareGuan {
		display: flex;
		justify-content: center;
		margin-top: 30upx;

		.shareGuanImg {
			height: 120upx;
			margin: 30upx 15upx;
		}
	}

	.sharebgDels {
		display: flex;
		justify-content: flex-end;
		margin-right: 20upx;
		margin-bottom: 20upx;

		.sharebgDel {
			width: 48upx;

		}
	}

	.sharebg-logo {
		padding: 12upx;
		background-color: #fff;
		border-radius: 29upx;
		// overflow: hidden;
		position: absolute;
		top: 20upx;
		left: 29%;
		transform: translate(65%, -7%);

		image {
			width: 82upx;
			height: 82upx;
		}
	}

	.share-cone {
		position: absolute;
		top: 21.5%;
		left: 50%;
		transform: translate(-47%, -50%);
		text-align: center;
		width: 500upx;

		.share-cone-title {
			font-size: 28upx;
			color: #2C2B72;
			margin-bottom: 10upx;
		}

		.share-cone-text {
			font-size: 24upx;
			color: #2C2B72;
			text-align: center;
		}
	}

	.sharebg-line {
		position: absolute;
		top: 48.5%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		width: 500upx;

		image {
			width: 200upx;
			height: 200upx;
			border: 8upx solid #C0EBFF;
			margin: 0 auto;
		}

		.sharebg-line-title {
			font-size: 23upx;
			color: #000000;
			margin-bottom: 5upx;
		}

		.sharebg-line-text {
			font-size: 24upx;
			color: #3D3D3D;
		}
	}
}
</style>